<template>
  <div class="code-box">
    <code-list :code="code"/>
  </div>

</template>

<script>
//代码高亮器 需要安装两个依赖
// npm install --save highlight.js
// npm install --save @highlightjs/vue-plugin

import 'highlight.js/styles/github.css';// 可以切换其它样式风格，例如黑色主题
import 'highlight.js/lib/common';
import hlj from "@highlightjs/vue-plugin";

export default {
  name: "code-block",
  props:{
    code:{
      type:String,
      default:''
    }
  },
  components: {
    codeList: hlj.component
  },
}
</script>

<style scoped>
.code-box{
  min-width: 500px;
  border-radius: 5px;
  margin: 10px;
  padding: 10px;
  box-sizing: border-box;
}
.code-box>>>.hljs{
  background-color: rgb(242,242,242) !important;
  border-radius: 5px;
}

</style>